<template>
	<div class="branch-wrap">
		<div class="branch-box-wrap">
			<div class="branch-box">

				<el-button class="add-branch"  type="success" disabled plain round @click="addTerm">添加分支</el-button>
				<div class="col-box" v-for="(item,index) in nodeConfig.branchs" :key="index">
					<div class="condition-node">
						<div class="condition-node-box">
							<div class="auto-judge" @click="show(index)">
								<div class="sort-left" v-if="index!=0" @click.stop="arrTransfer(index,-1)">
									<el-icon><el-icon-arrow-left /></el-icon>
								</div>
								<div class="title">
									<span style="color: rgb(9,96,224);">{{ item.nodeName }}</span>
									<el-icon class="close" @click.stop="delTerm(index)"><el-icon-close /></el-icon>
								</div>
								<div class="content">
									<span v-if="toText()" class="placeholder">{{ toText() }}</span>
									<span v-else class="placeholder">同意</span>
								</div>
								<div class="sort-right" v-if="index!=nodeConfig.branchs.length-1" @click.stop="arrTransfer(index)">
									<el-icon><el-icon-arrow-right /></el-icon>
								</div>
							</div>
							<add-node v-model="item.childNode" :parent-data="nodeConfig"></add-node>
						</div>
					</div>
					<slot v-if="item.childNode" :node="item"></slot>
					<div class="top-left-cover-line" v-if="index==0"></div>
					<div class="bottom-left-cover-line" v-if="index==0"></div>
					<div class="top-right-cover-line" v-if="index==nodeConfig.branchs.length-1"></div>
					<div class="bottom-right-cover-line" v-if="index==nodeConfig.branchs.length-1"></div>
				</div>
			</div>
			<add-node v-model="nodeConfig.childNode" :parent-data="nodeConfig"></add-node>
		</div>
	</div>
</template>

<script>
import addNode from './addNode'

export default {
	props: {
		modelValue: { type: Object, default: () => {} }
	},
	components: {
		addNode
	},
	data() {
		return {
			nodeConfig: {},
			drawer: false,
			isEditTitle: false,
			index: 0,
			form: {}
		}
	},
	watch:{
		modelValue(){
			this.nodeConfig = this.modelValue
		}
	},
	mounted() {
		this.nodeConfig = this.modelValue
	},
	methods: {
		// 显示编辑draw抽屉
		show(index){
			this.index = index
			this.form = {}
			this.form = JSON.parse(JSON.stringify(this.nodeConfig.branchs[index]))
			this.drawer = true
		},
		// 添加分支
		addTerm(){
			let len = this.nodeConfig.conditionNodes.length + 1
			this.nodeConfig.conditionNodes.push({
				nodeName: "条件" + len,
				type: 3,
				priorityLevel: len,
				conditionMode: 1,
				conditionList: []
			})
		},
		// 删除分支
		delTerm(index){
			this.nodeConfig.branchs.splice(index, 1)
			if (this.nodeConfig.branchs.length == 1) {
				if (this.nodeConfig.childNode) {
					if (this.nodeConfig.branchs[0].childNode) {
						this.reData(this.nodeConfig.branchs[0].childNode, this.nodeConfig.childNode)
					}else{
						this.nodeConfig.branchs[0].childNode = this.nodeConfig.childNode
					}
				}
				this.$emit("update:modelValue", this.nodeConfig.branchs[0].childNode);
			}
		},
		// 重新设置数据
		reData(data, addData) {
			if (!data.childNode) {
				data.childNode = addData
			} else {
				this.reData(data.childNode, addData)
			}
		},
		// 分支左右交换
		arrTransfer(index, type = 1){
			this.nodeConfig.branchs[index] = this.nodeConfig.branchs.splice(index + type, 1, this.nodeConfig.branchs[index])[0]
			this.nodeConfig.branchs.map((item, index) => {
				item.priorityLevel = index + 1
			})
			this.$emit("update:modelValue", this.nodeConfig)
		},
		// 文字显示
		toText(){
			return "根据审批意见流转"
		}
	}
}
</script>

<style>
</style>
